<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>VIP兑换</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__CSS__/public.min.css">
    <style>
        .price-item-sale {
            position: relative;
            -webkit-box-flex: 1;
            flex: 1;
            width: 26.66667vw;
            min-width: 30%;
            max-width: 26.66667vw;
            height: 32vw;
            padding: 0 2.66667vw;
            margin-right: 2.66667vw;
            margin-bottom: 5.33333vw;
            background: #f9f9f9;
            border: 1px solid #E6E6E6;
            border-radius: 0;
            box-sizing: border-box;
            text-align: center;
        }

        .price-item-sale > * {
            color: #bbb !important;
        }

        .price-item-sale del {
            display: block;
            font-size: 3.2vw;
            color: #999;
        }

        .sale-img {
            position: relative;
            width: 65px;
            height: 60px;
            right: -20px;
            bottom: -10px;
            background: url(/public/static/img/v2_none.png) center no-repeat;
            background-size: contain;
            transform: rotate(344deg);
        }

        .cells__title {
            padding-right: 0;
        }

        .text-gray {
            height: 20px;
            line-height: 20px;
            float: right;
            padding-left: 3vw;
            padding-right: 5vw;
            background: #B757D9;
            color: #fff !important;
            border-radius: 10px 0 0 10px;
            border: 1px solid rgba(255, 255, 255, 0);
        }
    </style>
</head>
<body ontouchstart>
<div class="page page--exchange">
    <div class="header">
        {if condition="$show"}
        <div class="header__hd"><a class="iconfont mb-mobile-back"></a></div>
        {/if}
        <h1 class="header__title">VIP兑换<span class="header__subtitle"></span></h1>
    </div>
    <div class="page__bd">
        <div class="cells">
            <div class="cells__title"><b class="text-vip f16">尊贵VIP</b> <span class="f12 text-gray">{$vip_str}</span></div>
            <div class="price-info">
                {foreach name="$list" item="vo"}
                {if condition="$vo.sale_type == 1"}
                <div class="price-item-sale">
                    <div class="price-item__hd">{$vo.name}
                        <div class="sale-img"></div>
                    </div>
                    <div class="price-item__bd">
                        <span class="f16">￥</span>{$vo.price|round=0}
                        {if condition="$vo.price_old > $vo.price"}
                        <del>原价￥{$vo.price_old|round=0}</del>
                        {/if}
                    </div>
                </div>
                {else /}
                <div class="price-item" data-points="{$vo.points}" data-price="{$vo.price}" data-type="{$vo.type}">
                    <div class="price-item__hd">{$vo.name}</div>
                    <div class="price-item__bd">
                        <span class="f16">￥</span>{$vo.price|round=0}
                        {if condition="$vo.price_old > $vo.price"}
                        <del>原价￥{$vo.price_old|round=0}</del>
                        {/if}
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
        </div>
        <div class="cells cells_radio mt10">
            <label class="cell cell_active check__label" for="wxpay">
                <div class="cell__bd">
                    <div class="cell__title">微信支付</div>
                </div>
                <div class="cell__ft"><span class="radio_info">赠送G币  个</span>
                    <input class="check" type="radio" name="pay" id="wxpay" data-pay_type="1" checked><i class="icon-checked"></i>
                </div>
            </label>
            <label class="cell cell_active check__label" for="alipay">
                <div class="cell__bd">
                    <div class="cell__title">支付宝支付</div>
                </div>
                <div class="cell__ft"><span class="radio_info">赠送G币  个</span>
                    <input class="check" type="radio" name="pay" id="alipay" data-pay_type="2"><i class="icon-checked"></i>
                </div>
            </label>
            <label class="cell cell_active check__label" for="box">
                <div class="cell__bd">
                    <div class="cell__title">G币支付</div>
                    <div class="cell__desc">G币余额 ：<span class="text-point">{$user['user_points']}</span> 个</div>
                </div>
                <div class="cell__ft"><span class="radio_info">需扣除G币  个</span>
                    <input class="check" type="radio" name="pay" id="box" data-pay_type="3"><i class="icon-checked"></i>
                </div>
            </label>
        </div>
        <div class="form__opr-area">
            <div class="btn btn_info btn_block">立即支付</div>
        </div>
    </div>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    var nobility = "{$nobility}";

    var $price_item = $(".price-item");

    $price_item.eq(0).addClass('active');

    $price_item.click(function () {
        $price_item.removeClass('active');
        $(this).addClass('active');

        var points = $(this).data("points");

        var $radio_info = $(".radio_info");
        $radio_info.eq(0).html("赠送G币 " + points + " 个");
        $radio_info.eq(1).html("赠送G币 " + points + " 个");

        $radio_info.eq(2).html("需扣除G币 " + $(this).data("price") * parseInt(nobility) + " 个");
    });

    $('.price-item.active').trigger("click");

    var submitted = true;
    $(".btn_block").click(function () {
        if (submitted) { //防止重复提交
            submitted = false;
            setTimeout(function () {
                submitted = true;
            }, 2000);

            //判断微信支付 或 邀请码支付
            var item = $('.price-item.active');

            var price_type = item.data("type");
            var radio = $('input:radio:checked');
            var pay_type = radio.data("pay_type");
            if (pay_type == 3) {
                var txt = "是否使用" + item.data("price") * parseInt(nobility) + "G币购买" + item.find(".price-item__hd").html();

                var $dialog = utils.dialog({
                    content: txt,
                    buttons: [{
                        label: '取消',
                        type: 'default',
                        onClick: function () {
                            $dialog.hide();
                        }
                    }, {
                        label: '确定',
                        type: 'primary',
                        onClick: function () {
                            $.ajax({
                                url: '/create_vip_order',
                                type: "POST",
                                dataType: "json",
                                data: {price_type: price_type, pay_type: pay_type},
                                success: function (res) {
                                    if (res.code == 200) {
                                        showMsg(res.msg, null, function () {
                                            if (getUrlParam("referer") == 1) {
                                                window.android._goBack("true");
                                            } else {
                                                location.reload();
                                            }
                                        });
                                    } else {
                                        showMsg(res.msg);
                                    }
                                }
                            });
                        }
                    }]
                });
            }

            if (pay_type == 1 || pay_type == 2) {
                //生成支付订单
                $.ajax({
                    url: '/create_vip_order',
                    type: "POST",
                    dataType: "json",
                    data: {price_type: price_type, pay_type: pay_type},
                    success: function (res) {
                        if (res.code == 200) {
                            var json = JSON.stringify(res.data);
                            console.log(json);
                            console.log(radio.attr("id"));

                            window.android._app_pay(json, radio.attr("id"));
                        } else {
                            showMsg(res.msg);
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>